<template>
	<view :data-theme="theme" class="container">
		<view class="print_header">
			<view class="bg_color" style="padding: 24rpx 24rpx;">
				<u-search v-model="keyWord" @custom="searchProduct" @search="searchProduct" placeholder="请输入商品名称/商品编码"
					actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
			</view>
		</view>

		<!-- 商品列表信息 -->
		<scroll-view scroll-y="true" class="print_center" @scrolltolower="scrolltolowerFn">
			<!-- 复选框 -->
			<!-- <u-checkbox-group v-model="checkboxValue" @change="checkboxGroup" placement="row">
				<view class="checke_list">
					循环下面
					<view class="checke_item" v-for="(item, index) in dataList" :key="index">
						<view class="item_top">
							<u-checkbox @change="checkbox1(index,$event,item)" :activeColor="bgColor" shape="circle" :name="JSON.stringify(item)"></u-checkbox>
							<view class="item_img">
								<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
							</view>
							<view class="item_right">
								[{{item.brandName}}]{{item.name}} ({{item.specParam}})
							</view>

						</view>
						<view class="item_bottom" style="font-size: 30rpx;color: #808080;margin: 20rpx 0;">
							<span style="display: inline-block;margin-right: 30rpx;">库存数<span
									style="color: #000;">{{item.allRemain}}</span>
							</span>
						</view>
						<view class="item_bottom">
							<view style="color: #808080;margin-right: 10rpx;">退库数</view>
							<u-number-box :min="0" :max="item.allRemain" v-model="item.cancelNumber"></u-number-box>
							<uni-number-box :min="1" :max="item.allRemain" v-model="item.cancelNumber" />
						</view>
					</view>
				</view>
			</u-checkbox-group> -->
			<checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxGroup">
				<!-- 循环下面 -->
				<label class="uni-list-cell uni-list-cell-pd checke_item" v-for="(item, index) in dataList"
					:key="index">
					<view class="item_top">
						<checkbox :value="JSON.stringify(item)" :iconColor="bgColor" :checked="item.checked"
							class="round-checkbox"/>
						<view class="item_img">
							<u--image :showLoading="true" :src="item.image" width="80px" height="80px"></u--image>
						</view>
						<view class="item_right">
							<text v-if="item.brandName != null">[{{item.brandName}}]</text>{{item.name}} ({{item.specParam}})
						</view>
					</view>
					<view class="item_bottom" style="font-size: 30rpx;color: #808080;margin: 20rpx 0;">
						<span style="display: inline-block;margin-right: 30rpx;">库存数<span
								style="color: #000;">{{item.allRemain}}</span>
						</span>
					</view>
					<view class="item_bottom">
						<view style="color: #808080;margin-right: 10rpx;">退库数</view>
						<!-- <u-number-box :min="0" :max="item.allRemain" v-model="item.cancelNumber"></u-number-box> -->
						<uni-number-box :min="1" :max="item.allRemain" v-model="item.cancelNumber" />
					</view>
				</label>
			</checkbox-group>
		</scroll-view>


		<!-- 内容为空 -->
		<u-empty class="empty" v-if="!dataList.length" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		<!-- 上拉加载更多 -->
		<uni-load-more :status="loadMoreStatus"></uni-load-more>

		<!-- 全选框 -->
		<view class="print_footer">
			<view class="checkAll">
				<checkbox-group  @change="onCheckAll">
					<label class="uni-list-cell uni-list-cell-pd" style="display: flex;line-height: 34rpx;">
						<view>
							<checkbox :value="isAllChecked.toString()" :checked="isAllChecked"/>
						</view>
						<view>全选</view>
					</label>
				</checkbox-group>
			</view>
			<button @click="toAddSelect()" :disabled="!checkboxValue.length" class="button_footer bg_color">选好了</button>
		</view>

	</view>
</template>

<script>
	import {
		businessQueryGoodsAndDepotApi
	} from '@/api/goodsAndDepot.js';
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyWord: '', //关键字查询
				cancellForm: {},
				dataList: [],
				totalPage: 0,
				loadMoreStatus: 'noMore',
				// -----------
				isAllChecked: false,
				//	表单收集
				checkboxValue: [],
				// 每一列的数组
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			let data = options.data;

			let that = this;
			that.cancellForm = {
					consignPreSale: 1, //查询寄售
					current: 1,
					size: 10,
					depotId: 1,
				},
				this.getQueryList();
		},
		// 监听选中的数组
		watch: {
			checkboxValue(newVal, oldVal) {
				if (this.dataList.length == this.checkboxValue.length) {
					this.isAllChecked = true
				} else {
					this.isAllChecked = false
				}
			},
		},
		methods: {
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				};
				this.cancellForm.current++;
				this.getQueryList(true);
			},
			// --------api------获取数据
			getQueryList(isMerge) {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				if (!isMerge) {
					this.cancellForm.current = 1;
					this.loadMoreStatus = 'more';
				};
				businessQueryGoodsAndDepotApi(this.cancellForm).then((res) => {
					let data = res.data;
					if (isMerge) {
						that.$util.SplitArray(data.records, that.dataList);
					} else {
						that.dataList = data.records;
					}
					for (let item of that.dataList) {
						item.checked = false;
					}
					that.totalPage = data.pages;
					if (data.pages == this.cancellForm.current) {
						that.loadMoreStatus = 'noMore';
					}
					uni.hideLoading();
				})
			},
			checkboxGroup(ele) {
				// this.checkboxValue = ele;
				
				//-----------
				let checkBoxValue = ele.detail.value
				let checkBoxGroup = checkBoxValue.map((item) => JSON.parse(item));
				for(let item of checkBoxGroup){
					item.checked = true;
				};
				this.checkboxValue = checkBoxValue;
			},
			// 单点击复选框事件
			checkbox1(index, checked, item) {
				this.dataList[index].checked = checked;
				if (checked == true) {
					this.checkboxValue.push(this.dataList[index])
				}
			},
			// 全选框
			onCheckAll(val) {
				// if (val) {
				// 	this.checkboxValue = this.dataList.map((item) => JSON.stringify(item));
				// } else {
				// 	this.checkboxValue = [];
				// }
				let that = this;
				let isAllCheck = val.detail.value.length > 0;
				if (isAllCheck) {
					this.checkboxValue = this.dataList.map((item) => JSON.stringify(item));
					for(let item of that.dataList){
						item.checked = true;
					}
				} else {
					this.checkboxValue = [];
					for(let item of that.dataList){
						item.checked = false;
					}
				}
			},
			toAddSelect() {
				let checkboxValue = this.checkboxValue.map((item) => JSON.parse(item))
				let selectProductArray = checkboxValue.map(item => {
					return {
						brandName: item.brandName,
						productId:item.productId,
						productName:item.name,
						returnQuantity:item.cancelNumber,
						skuId:item.sku,
						skuImage:item.image,
						skuName:item.specParam,
						skuUnit:`单位`,
					};
				}); // 提取出所有 checked 属性值为 true 的对象的 count 属性值
				// let selectProductArray = checkboxValue.filter(item => item.checked).map(item => {
				// 	return {
				// 		brandName: item.brandName,
				// 		productId:item.productId,
				// 		productName:item.name,
				// 		returnQuantity:item.cancelNumber,
				// 		skuId:item.sku,
				// 		skuImage:item.image,
				// 		skuName:item.specParam,
				// 		skuUnit:`单位`,
				// 	};
				// }); // 提取出所有 checked 属性值为 true 的对象的 count 属性值
				for(let item of selectProductArray){
					if( item.returnQuantity == undefined || item.returnQuantity == 0){
						uni.showToast({
							title: '请填写退库数量',
							icon: 'none', // 提示图标，可选值：'success', 'loading', 'none'
							duration: 2000 // 持续时间，单位为毫秒
						});
						return;
					}
				};
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						prevPage.$vm.otherFun(selectProductArray);
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	page {
		display: flex;
		height: 100%;
		flex-direction: column;
		overflow: hidden;

		.container {
			display: flex;
			height: 100%;
			flex-direction: column;
			overflow: hidden;
		}

		// 头部内容
		.print_header {
			background-color: white;
			// padding: 0px 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			// height: 110px;

			// 打印时间以及仓库名称
			.header_top {
				display: flex;
				justify-content: space-between;

				.top_left {
					display: flex;

					view {
						margin-right: 10px;
						font-weight: bold;
					}

				}

				.top_right {
					display: flex;

					view {
						margin-right: 10px;
						font-weight: bold;
					}
				}
			}

			// 打印相关的数量
			.header_center {
				display: flex;

				view {
					margin-right: 30px;
				}
			}

			// <!-- 选择商品 -->
			.header_botton {
				display: flex;
				justify-content: space-between;
				align-items: center;

				view {
					margin-right: 10px;
					font-weight: bold;
				}
			}
		}

		// 内容为空
		.empty {
			flex: 1;
			height: 100%;
		}

		// 商品列表
		.print_center {
			// margin-top: 10px;
			// background-color: white;
			flex: 1;
			overflow: scroll;

			.checke_list {
				width: 100%;
				margin: 20rpx;

				.checke_item {
					display: flex;
					flex-direction: column;
					// justify-content: space-around;
					// align-items: center;
					background-color: white;
					padding: 20px;
					margin-top: 10px;
					width: 100%;
					border-radius: 20rpx;

					.item_top {
						display: flex;
						// justify-content: space-around;
						align-items: center;

						.item_img {
							margin-right: 10px;

							image {
								width: 50px;
								height: 70px;
							}

						}

						.item_right {
							font-weight: bold;
							line-height: 20px;
						}
					}

					.item_bottom {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.counter {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100px;
							height: 30px;
							border: 1px solid #ccc;
							border-radius: 5px;
							overflow: hidden;
						}

						.counter text {
							width: 40px;
							height: 30px;
							text-align: center;
							line-height: 30px;
							font-size: 16px;
							color: #333;
						}
					}
				}
			}
		}

		// 弹窗
		.popup-content {
			text-align: center;
			background-color: #fff;
		}

		.popup-content>text {
			font-size: 30rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}

		.popup-height {
			width: 200px;
		}

		.ensure {
			// width: 100%;
			background-color: #fff;
			padding-bottom: 22rpx;
			padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/

			.text.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50rpx;
			}

			.text-left {
				// flex: 1;
				text-align: left;
			}

			.center {
				flex: 1;
				text-align: center;
			}

			.right {
				color: #808080;
				flex: 1;
				text-align: right;
				font-size: 36rpx;
			}
		}

		// 底部内容
		.print_footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			height: 60px;
			padding: 0 30rpx;

			view {
				margin-right: 20px;
			}

			.button_footer {
				border-radius: 10rpx;
				padding: 20rpx 40rpx;
				color: #fff;
				@include main_bg_color(theme);
			}
		}
	}
</style>